<template>
  <div>
    <div class="header_context">
      <el-form :inline="true" :model="formClass" class="demo-form-inline" ref="formClass">
        <el-form-item label="课程名称">
          <el-input v-model="formClass.courseName" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formClass.status">
            <el-option label="全部" value="null"></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findClass">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button class="add_class" type="primary" @click="addCourse">+新建课程</el-button>
    </div>
    <el-card>
      <el-table
        :data="tableCls"
        style="width: 100%"
        v-loading="isLoading">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          width="200">
        </el-table-column>
        <el-table-column
          label="价格"
          width="180">
          <template slot-scope="{row}">{{'￥'+ row.price}}</template>
        </el-table-column>
        <el-table-column
          prop="sortNum"
          label="排序"
          width="180">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="120">
          <template slot-scope="{row}">
            <i :class="row.status ? status_g : status_r"></i>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button
              :class="row.status?danger:success"
              size="small"
              :disabled="row.isStatusLoading"
              @click="changeStatus(row)">
              {{ row.status?'下架':'上架'}}
              </el-button>
            <el-button type="warning" size="small" :disabled="isLoading" @click="editCourse(row)">编辑</el-button>
            <el-button type="primary" size="small" :disabled="isLoading" @click="courseSections(row)">内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formClass.currentPage"
      :page-sizes="[3,5,7,9]"
      :page-size="formClass.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      :disabled="isLoading">
    </el-pagination>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { changeState, getQueryCourses } from '@/services/courses'
import { Form } from 'element-ui'
export default Vue.extend({
  name: 'CourseIndex',
  data () {
    return {
      formClass: {
        currentPage: 1,
        pageSize: 9,
        courseName: '',
        status: null
      },
      tableCls: [],
      totalCount: 0,
      status_g: 'status_icon_g',
      status_r: 'status_icon_r',
      danger: 'danger_btn',
      success: 'success_btn',
      isLoading: true
    }
  },
  methods: {
    async findClass () {
      // console.log('submit!')
      await this.loadCourses();
      (this.$refs.formClass as Form).resetFields()
      this.formClass.courseName = ''
      this.formClass.status = null
    },
    async loadCourses () {
      this.isLoading = true
      const { data: { content } } = await getQueryCourses(this.formClass)
      // console.log(content)
      content.records.forEach((item:any) => {
        item.isStatusLoading = false
      })

      this.tableCls = content.records
      this.totalCount = content.total
      this.isLoading = false
    },
    handleSizeChange (val:number) {
      // console.log(val)
      this.formClass.pageSize = val
      this.formClass.currentPage = 1
      this.loadCourses()
    },
    handleCurrentChange (val:number) {
      // console.log(val)
      this.formClass.currentPage = val
      this.loadCourses()
    },
    async changeStatus (row:any) {
      // console.log(row)
      row.isStatusLoading = true
      const { data } = await changeState({
        courseId: row.id,
        status: row.status ? 0 : 1
      })
      if (data.code === '000000') {
        await this.loadCourses()
        this.$message.success(`${row.status === 0 ? '上架' : '下架'}成功`)
        row.isStatusLoading = true
      }
      // console.log(data)
      // 查看上下架地址 ： http://edufront.lagou.com/#/
    },
    addCourse () {
      this.$router.push({ name: 'new-course' })
    },
    editCourse (row:any) {
      this.$router.push({ name: 'edit-course', params: { courseId: row.id } })
    },
    courseSections (row:any) {
      this.$router.push({ name: 'sections', params: { courseId: row.id } })
    }
  },
  created () {
    this.loadCourses()
  }
})
</script>

<style lang="scss" scoped>
.header_context{
  // display: inline-block;
  display: flex;
  justify-content: space-between;
  .add_class{
    display: inline-block;
    vertical-align: center;
    margin-bottom: 22px;
    // margin-right: 10px;
  }
}
.status_icon_g:after{
  content: '';
  background-color: #51cf66;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.status_icon_r:after{
  content: '';
  background-color: #ff6b6b;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.danger_btn{
  background-color: #ff8989;
  color: white;
}
.success_btn{
 background-color: #74d985;
 color: white;
}
.el-button-success:hover{
 color:white;
}
</style>
